<template>
  <div>
    <BG></BG>
    <div class="head">
      <h1>大数据可视化展板通用模板</h1>
      <div class="weather">
        <!--<img src="picture/weather.png"><span>多云转小雨</span>-->
        <span id="showTime"></span>
      </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <Container title="出勤数据">
            <Z :data="alist"></Z>
          </Container>
          <Container title="销售数据">
            <Z :data="blist"></Z>
          </Container>
          <div class="boxall" style="height: 3.2rem">
            <div style="height:100%; width: 100%;">
              <div class="sy" id="fb1"></div>
              <div class="sy" id="fb2"></div>
              <div class="sy" id="fb3"></div>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">12581189</li>
                <li class="pulll_left counter">3912410</li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">2018年总收入情况</li>
                <li class="pulll_left">2018年总支出情况</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1">
              <img src="/charts/picture/lbx.png" />
            </div>
            <div class="map2">
              <img src="/charts/picture/jt.png" />
            </div>
            <div class="map3">
              <img src="/charts/picture/map.png" />
            </div>
            <div class="map4" id="map_1"></div>
          </div>
        </li>
        <li>
          <Container title="访问数据">
            <Lineechart></Lineechart>
          </Container>

          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">模块标题样式</div>
            <div class="allnav" id="echart5"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem">
            <div class="alltitle">模块标题样式</div>
            <div class="allnav" id="echart6"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
  </div>
</template>

<script>
import {
  echarts_1,
  echarts_2,
  echarts_4,
  echarts_5,
  echarts_6,
  echarts_31,
  echarts_32,
  echarts_33
} from "@/utils/js/initChart";
import "@/utils/js/china";
import BG from "@/components/charts/bg";
import Z from "@/components/charts/zhu";
import Lineechart from "@/components/charts/line";
import { map } from "@/utils/js/area_echarts";
import Container from "../components/charts/container";


export default {
  components: {
    BG,
    Z,
    Lineechart,
    Container
  },
  data() {
    return {
      alist: [
        {
          name: "面包",
          val: 100
        },
        {
          name: "牛奶",
          val: 200
        },
        {
          name: "可乐",
          val: 50
        }
      ],
      blist: [
        {
          name: "包子",
          val: 400
        },
        {
          name: "豆浆",
          val: 200
        },
        {
          name: "油条",
          val: 650
        }
      ]
    };
  },
  mounted() {
    window.onload = () => {
    //   document.querySelector("html").style.fontSize =
    //     window.innerWidth / 20 + "px";
      echarts_5();
      echarts_6();
      echarts_31();
      echarts_32();
      echarts_33();
      map();
      window.onresize = () => {
        document.querySelector("html").style.fontSize =
          window.innerWidth / 20 + "px";
      };
    }
  }
};
</script>

<style scoped>
@import url("/charts/css/comon.css");

html {
  height: 100%;
  background-image: -webkit-radial-gradient(
    ellipse farthest-corner at center center,
    #1b44e4 0%,
    #020f3a 100%
  );
  background-image: radial-gradient(
    ellipse farthest-corner at center center,
    #1b44e4 0%,
    #020f3a 100%
  );
  cursor: move;
}

body {
  width: 100%;
  margin: 0;
}
</style>